<template>
    <a-skeleton active :loading="loading" :paragraph="{rows: 24}" style="background-color: #fff;margin-top: 20px">
        <div style="padding: 10px;">
            <a-row>
                <a-col :span="span" v-for="(movie, index) in movies" :key="index" style="padding: 1rem;">
                    <a-card class="movie-card" style="width: 200px" @click="detail(movie.bookId)">
                        <img :src="movie.imageURLM" style="width: 198px; height: 300px;"/>
                        <div class="movie-desc">
                            <div class="movie-title" :title="movie.bookTitle"><p>{{movie.bookTitle}}</p></div>
                            <p style="color: #aaa;margin-bottom: .2rem">作者：{{movie.bookAuthor}}</p>
                            <p>出版日期：{{movie.yearOfPublication}}</p>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </div>
    </a-skeleton>
</template>
<script>
    export default {
        name: 'bookIndex',
        data () {
            return {
                loading: true,
                movies: [],
                span: '',
                screenWidth: document.body.clientWidth,
                timer: null
            }
        },
        methods: {
            detail (id) {
                this.$emit('bookDetail',id)
            },
            getDate (tm) {
                return new Date(tm * 1000).toLocaleString()
            }
        },
        mounted () {
            const that = this
            let val = window.innerWidth
            if (val > 1660) {
                this.span = 4
            } else if (val > 1250) {
                this.span = 6
            } else if (val > 1000) {
                this.span = 8
            } else if (val > 900) {
                this.span = 10
            } else {
                this.span = 12
            }
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
            this.$get('books/bookTopList').then((data)=> {
                if(data.data.status == 1){
                    this.movies = data.data.data
                    this.loading = false
                }
            })
        },
        watch: {
            screenWidth (val) {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                this.timer = setTimeout(() => {
                    this.screenWidth = val
                    if (val > 1660) {
                        this.span = 4
                    } else if (val > 1250) {
                        this.span = 6
                    } else if (val > 1000) {
                        this.span = 8
                    } else if (val > 900) {
                        this.span = 10
                    } else {
                        this.span = 12
                    }
                }, 100)
            }
        }
    }
</script>
<style lang="less">
    .movie-card {
        .ant-card-body {
            padding: 0 !important;
        }
        .movie-desc {
            padding: 1rem 0 0 0;
            text-align: center;
            .movie-title {
                font-size: .9rem;
                font-weight: 600;
                margin-bottom: .2rem;
                p {
                    margin-bottom: 0 !important;
                }
            }
        }
        &:hover {
            cursor: pointer;
            box-shadow: 4px 0 8px 0 rgba(29, 35, 41, 0.1);
        }
    }
    .movie-detail {
        p {
            margin-bottom: .4rem;
        }
        .poster {
            margin-right: -4rem;
            .poster-img {
                width: 198px;
                height: 300px;
            }
        }
    }
</style>
